<template>
  <div class="enterprise-solution">
    <div class="solution-header">
      <div class="container">
        <h1>企业服务解决方案</h1>
        <p class="subtitle">为企业提供全方位的AI技术支持与服务</p>
      </div>
    </div>

    <div class="solution-content">
      <div class="container">
        <!-- 解决方案概述 -->
        <section class="overview">
          <h2>方案概述</h2>
          <div class="overview-content">
            <div class="overview-text">
              <p>我们为企业提供从数据采集、模型训练到部署运维的一站式AI解决方案，帮助企业实现数字化转型，提升运营效率。</p>
            </div>
            <div class="overview-image">
              <img src="/solutions/enterprise-overview.jpg" alt="企业服务概述">
            </div>
          </div>
        </section>

        <!-- 核心优势 -->
        <section class="advantages">
          <h2>核心优势</h2>
          <div class="advantages-grid">
            <div class="advantage-card" v-for="advantage in advantages" :key="advantage.title">
              <i :class="advantage.icon"></i>
              <h3>{{ advantage.title }}</h3>
              <p>{{ advantage.description }}</p>
            </div>
          </div>
        </section>

        <!-- 应用场景 -->
        <section class="scenarios">
          <h2>应用场景</h2>
          <div class="scenarios-grid">
            <div class="scenario-card" v-for="scenario in scenarios" :key="scenario.title">
              <div class="scenario-icon">
                <i :class="scenario.icon"></i>
              </div>
              <div class="scenario-content">
                <h3>{{ scenario.title }}</h3>
                <p>{{ scenario.description }}</p>
                <ul class="scenario-features">
                  <li v-for="feature in scenario.features" :key="feature">{{ feature }}</li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <!-- 成功案例 -->
        <section class="cases">
          <h2>成功案例</h2>
          <div class="cases-grid">
            <div class="case-card" v-for="case_ in cases" :key="case_.title">
              <div class="case-image">
                <img :src="case_.image" :alt="case_.title">
              </div>
              <div class="case-content">
                <h3>{{ case_.title }}</h3>
                <p class="case-description">{{ case_.description }}</p>
                <div class="case-results">
                  <div class="result-item" v-for="result in case_.results" :key="result.label">
                    <span class="result-value">{{ result.value }}</span>
                    <span class="result-label">{{ result.label }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 合作流程 -->
        <section class="process">
          <h2>合作流程</h2>
          <div class="process-timeline">
            <div class="process-step" v-for="(step, index) in process" :key="index">
              <div class="step-number">{{ index + 1 }}</div>
              <div class="step-content">
                <h3>{{ step.title }}</h3>
                <p>{{ step.description }}</p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const advantages = ref([
  {
    icon: 'fas fa-rocket',
    title: '快速部署',
    description: '成熟的解决方案，支持快速落地实施'
  },
  {
    icon: 'fas fa-cogs',
    title: '灵活定制',
    description: '根据企业需求提供个性化定制服务'
  },
  {
    icon: 'fas fa-shield-alt',
    title: '安全可靠',
    description: '企业级安全保障，数据隐私保护'
  },
  {
    icon: 'fas fa-chart-line',
    title: '持续优化',
    description: '持续的技术支持和优化服务'
  }
])

const scenarios = ref([
  {
    icon: 'fas fa-robot',
    title: '智能客服',
    description: '全天候智能客服系统，提升服务效率',
    features: [
      '多轮对话支持',
      '情感识别分析',
      '知识库自动更新',
      '多语言支持'
    ]
  },
  {
    icon: 'fas fa-chart-pie',
    title: '数据分析',
    description: '企业数据智能分析平台',
    features: [
      '多维度数据分析',
      '实时数据监控',
      '预测分析模型',
      '可视化报表'
    ]
  },
  {
    icon: 'fas fa-search',
    title: '智能检测',
    description: '工业质量智能检测系统',
    features: [
      '实时缺陷检测',
      '质量预警分析',
      '生产效率优化',
      '设备状态监控'
    ]
  }
])

const cases = ref([
  {
    title: '某大型制造企业智能化升级',
    description: '通过AI技术实现生产线智能化升级，提升生产效率和产品质量',
    image: '/cases/case1.jpg',
    results: [
      { value: '30%', label: '效率提升' },
      { value: '50%', label: '成本降低' },
      { value: '99.9%', label: '准确率' }
    ]
  },
  {
    title: '某电商平台智能客服系统',
    description: '部署智能客服系统，提供7*24小时在线服务',
    image: '/cases/case2.jpg',
    results: [
      { value: '90%', label: '问题解决率' },
      { value: '60%', label: '人力成本降低' },
      { value: '95%', label: '客户满意度' }
    ]
  }
])

const process = ref([
  {
    title: '需求分析',
    description: '深入了解企业需求，制定个性化解决方案'
  },
  {
    title: '方案设计',
    description: '专业团队进行方案设计和技术选型'
  },
  {
    title: '开发实施',
    description: '快速开发部署，确保系统稳定运行'
  },
  {
    title: '持续优化',
    description: '持续提供技术支持和优化服务'
  }
])
</script>

<style scoped lang="scss">
.enterprise-solution {
  .solution-header {
    background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
    padding: 80px 0;
    color: white;
    text-align: center;

    h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
    }
  }

  .solution-content {
    section {
      padding: 80px 0;

      &:nth-child(even) {
        background: #f8f9fa;
      }

      h2 {
        text-align: center;
        font-size: 2rem;
        margin-bottom: 50px;
        color: var(--text-color);
        position: relative;
        padding-bottom: 15px;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60px;
          height: 3px;
          background: var(--primary-color);
        }
      }
    }

    .overview {
      .overview-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;

        @media (max-width: 768px) {
          grid-template-columns: 1fr;
        }

        .overview-text {
          p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #666;
          }
        }

        .overview-image {
          img {
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
          }
        }
      }
    }

    .advantages-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;

      .advantage-card {
        text-align: center;
        padding: 40px 20px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        transition: transform 0.3s ease;

        &:hover {
          transform: translateY(-10px);
        }

        i {
          font-size: 3rem;
          color: var(--primary-color);
          margin-bottom: 20px;
        }

        h3 {
          margin-bottom: 15px;
          color: var(--text-color);
        }

        p {
          color: #666;
        }
      }
    }

    .scenarios-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;

      .scenario-card {
        background: white;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        display: flex;
        gap: 20px;

        .scenario-icon {
          flex-shrink: 0;
          width: 60px;
          height: 60px;
          background: rgba(52, 152, 219, 0.1);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            font-size: 1.5rem;
            color: var(--primary-color);
          }
        }

        .scenario-content {
          h3 {
            margin-bottom: 10px;
            color: var(--text-color);
          }

          p {
            color: #666;
            margin-bottom: 15px;
          }

          .scenario-features {
            list-style: none;
            
            li {
              color: #666;
              margin-bottom: 5px;
              display: flex;
              align-items: center;

              &::before {
                content: '•';
                color: var(--primary-color);
                margin-right: 10px;
              }
            }
          }
        }
      }
    }

    .cases-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;

      .case-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);

        .case-image {
          height: 200px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .case-content {
          padding: 20px;

          h3 {
            margin-bottom: 10px;
            color: var(--text-color);
          }

          .case-description {
            color: #666;
            margin-bottom: 20px;
          }

          .case-results {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            text-align: center;

            .result-item {
              .result-value {
                display: block;
                font-size: 1.5rem;
                font-weight: bold;
                color: var(--primary-color);
                margin-bottom: 5px;
              }

              .result-label {
                color: #666;
                font-size: 0.9em;
              }
            }
          }
        }
      }
    }

    .process-timeline {
      max-width: 800px;
      margin: 0 auto;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--primary-color);

        @media (min-width: 768px) {
          left: 50%;
          transform: translateX(-50%);
        }
      }

      .process-step {
        display: flex;
        align-items: flex-start;
        padding: 20px 0;
        position: relative;

        @media (min-width: 768px) {
          justify-content: center;
          
          &:nth-child(even) {
            flex-direction: row-reverse;

            .step-content {
              text-align: right;
            }
          }
        }

        .step-number {
          width: 40px;
          height: 40px;
          background: var(--primary-color);
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          z-index: 1;
          flex-shrink: 0;
        }

        .step-content {
          padding: 0 20px;
          flex: 1;

          h3 {
            margin-bottom: 10px;
            color: var(--text-color);
          }

          p {
            color: #666;
          }
        }
      }
    }
  }
}
</style> 